@font-face {
    font-family: 'iconfont';
    src: url('../font_iujxhmw23i/iconfont.ttf') format('truetype');
  }

* {
    margin: 0;
    padding: 0;
}
// body {
//     height: 6000px;
// }
div {
    box-sizing: border-box;
}
a {
    color: #ccc;
    text-decoration: none;
    &:hover {
        color: skyblue;
        text-shadow: 1px 0 2px rgba(56,66,77,.3);
        text-decoration: none;
    }
}
button {
    outline: none;
    border: 0;
}
.pt {
    padding-top: 120px;
}
.pb {
    padding-bottom: 120px;
}
.mt {
    margin-top: 50px;
}
.mb {
    margin-bottom: 50px;
}
// 返回顶部按钮
#btn_top {
    position: fixed;
    bottom: 150px;
    right: 100px;
    z-index: 888;
    text-align: center;
    button {
        position: absolute;
        width: 50px;
        height: 50px;
        font-size: 16px;
        border-radius: 50%;
        color: #fff;
        display: none;
        transition: all .4s;
        background-color: rgba(31, 31, 31,.5);
        font-family: "iconfont" !important;
    }
}
// 标题
.title {
    overflow: hidden;
    margin-top: 90px;
    text-align: center;
    h3 {
        span {
            padding: 0 50px;
            position: relative;
            display: inline-block;
            &::before,&::after {
                position: absolute;
                top: 50%;
                right: 190px;
                content: "";
                width: 400%;
                height: 4px;
                border-top: 1px solid #ccc;
                border-bottom: 1px solid #ccc;
            }
            &::after {
                left: 190px;
            }
        }
    }
}
// 卡片模块
.card_ {
    border: 0;
    overflow: hidden;
    box-shadow: 0 0 25px 0 rgba(173,206,243,.3);
    img {
        transition: all .3s;
    }
    &:hover {
        img {
            transform: scale(1.1);
        }
        box-shadow: 0 0 25px 0 rgba(173,206,243,.7);
    }
    p {
        color: #666;
    }
    
}
header {
    // 头部介绍
.header {
    position: relative;
    width: 100%;
    height: 600px;
    background: url(../images/u=864176436\,4098180251&fm=253&fmt=auto&app=138&f=JPEG.webp) no-repeat;
    background-size: cover;
    &::before {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgba(56,66,77,.3);
        content: "";

    }
    // 头像
    .logo {
        position: absolute;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%,-50%);
        .img {
            width: 80px;
            height: 80px;
            margin-left: 35px;
            border: 3px solid rgba(56,66,77,.5);
            border-radius: 50%;
            margin-bottom: 5px;
            img {
                width: 100%;
                border-radius: 50%;
            }
        }
        a {
            color: #333;
        }
    }
}
}
// 导航条
.header_nav {
    position: sticky;
    top: 0;
    background-color: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    z-index: 900;
    // .nav_ {
    //     height: 60px;
    //     line-height: 45px;
    // }
        .active {
            color: skyblue!important;
        }
    
}

// CSS HTML 部分
.csshtml_works {
    // 座右铭
    background-color: #ededed;
    .motto {
        font-size: 22px;
        text-align: center;
    }
    // HTML/CSS 项目
    h3 {
        span {
            padding: 0px;
        }
    }
}

// JS 部分
.js_works {
    // HTML/CSS 项目
    h3 {
        span {
            padding: 0 90px;
        }
    }
}

// 4. JQ部分
.jq_works {
    background-color: #ededed;
    // JQ 项目
    
}

// 5. CSS3 / HTML5 部分
.c3h5_works {
    h3 {
        span {
            padding: 0px;
        }
    }
}

// 6. Bootstarp 部分
.bootstarp_works {
    background-color: #ededed;
    h3 {
        span {
            padding: 0px;
            &::before {
                width: 150%;
                right: 310px;
            }
            &::after {
                width: 150%;
                left: 310px;
            }
        }
    }
}

// 加载动画
.loading {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    background-color: #333;
    .lds-ellipsis {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 80px;
        height: 80px;
        background-color: #333;
        z-index: 999
      }
      
      .lds-ellipsis div {
        position: absolute;
        top: 33px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #fff;
        animation-timing-function: cubic-bezier(0, 1, 1, 0);
      }
      
      .lds-ellipsis div:nth-child(1) {
        left: 8px;
        animation: lds-ellipsis1 0.6s infinite;
      }
      
      .lds-ellipsis div:nth-child(2) {
        left: 8px;
        animation: lds-ellipsis2 0.6s infinite;
      }
      
      .lds-ellipsis div:nth-child(3) {
        left: 32px;
        animation: lds-ellipsis2 0.6s infinite;
      }
      
      .lds-ellipsis div:nth-child(4) {
        left: 56px;
        animation: lds-ellipsis3 0.6s infinite;
      }
      
      @keyframes lds-ellipsis1 {
        0% {
          transform: scale(0);
        }
      
        100% {
          transform: scale(1);
        }
      }
      
      @keyframes lds-ellipsis3 {
        0% {
          transform: scale(1);
        }
      
        100% {
          transform: scale(0);
        }
      }
      
      @keyframes lds-ellipsis2 {
        0% {
          transform: translate(0, 0);
        }
      
        100% {
          transform: translate(24px, 0);
        }
      }
}
  